<script setup lang="ts">
import jsonData from "#/index.json"
import { reactive, ref, watch } from "vue"
import { getAddressDetails } from "@/utils/transform"
import { getPositionInformation } from "@/api/position"
import { useUserStore } from "@/store/modules/user"
import { deliverResumeByUser } from "@/api/user/interview"
import { ElMessage } from "element-plus"

const props = defineProps({
  id: Number
})
const userStore = useUserStore()
const {
  basicInfo: { id: userId }
} = userStore

// #region 职位详情
const descriptionData = reactive({
  position: {
    createTime: "",
    id: "",
    studyingExperience: undefined as any,
    updateTime: "",
    workAddress: [] as [(string | number)?, (string | number)?, (string | number)?],
    workDescription: "",
    workPrice: undefined as any,
    workTime: undefined as any,
    workName: "",
    workStatus: undefined as any
  },
  company: {
    companyAddress: [] as [number?, number?, number?],
    companyDescription: "",
    companyEmail: "",
    companyName: "",
    companyPhone: "",
    companyPictures: [] as string[],
    companyRegisterCapital: "",
    companyRegisterDate: "",
    companyShortName: ""
  }
})
const activeDescriptionTab = ref("position")
const getResourecLabel = (val: number | string, resource: { value: number; label: string }[]) => {
  if (val === undefined) val = "1"
  const [tagItem] = resource.filter((item) => item.value === Number(val))
  return tagItem.label
}

function getPositionData(id: number) {
  getPositionInformation({ workStatus: 2, id }).then(({ data }) => {
    const { companyVO, ...positionVO } = data.records[0]
    descriptionData.position = positionVO
    descriptionData.company = companyVO
  })
}

function deliveryJob() {
  deliverResumeByUser({
    companyWorkId: descriptionData.position.id,
    userId
  }).then(({ data }) => {
    if (data) {
      ElMessage({ type: "success", message: "投递成功" })
    }
  })
}

watch(
  () => props.id,
  (cur) => {
    getPositionData(cur!)
  },
  {
    immediate: true
  }
)
// #endregion
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeDescriptionTab">
      <el-tab-pane label="职位信息" name="position">
        <el-descriptions :title="descriptionData.position?.workName" :column="1">
          <el-descriptions-item label="工作经验">
            {{ getResourecLabel(descriptionData.position?.workTime, jsonData.workTime) }}</el-descriptions-item
          >
          <el-descriptions-item label="薪资范围">
            <el-tag type="info">{{
              getResourecLabel(descriptionData.position?.workPrice!, jsonData.workPrice)
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="职位描述">
            <div style="white-space: pre-line" v-html="descriptionData.position?.workDescription" />
          </el-descriptions-item>
          <el-descriptions-item label="学历">
            <el-tag effect="plain" round>{{
              getResourecLabel(descriptionData.position?.studyingExperience!, jsonData.studyacademicDegree)
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            <span style="text-decoration: underline dotted">
              <el-text type="info">{{
                getAddressDetails(descriptionData.position?.workAddress as any) || "未知"
              }}</el-text>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ descriptionData.position?.createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ descriptionData.position?.updateTime }}</el-descriptions-item>
          <template #extra>
            <el-button @click="deliveryJob">投递简历</el-button>
          </template>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="公司信息" name="company">
        <el-descriptions :column="1">
          <el-descriptions-item label="公司名称">{{ descriptionData.company.companyName }}</el-descriptions-item>
          <el-descriptions-item label="公司简称">{{ descriptionData.company.companyShortName }}</el-descriptions-item>
          <el-descriptions-item label="公司描述">{{ descriptionData.company.companyDescription }}</el-descriptions-item>
          <el-descriptions-item label="公司电话">{{ descriptionData.company.companyPhone }}</el-descriptions-item>
          <el-descriptions-item label="公司邮箱">{{ descriptionData.company.companyEmail }}</el-descriptions-item>
          <el-descriptions-item label="公司地址">{{ descriptionData.company.companyAddress }}</el-descriptions-item>
          <el-descriptions-item label="公司注册资本">{{
            descriptionData.company.companyRegisterCapital
          }}</el-descriptions-item>
          <el-descriptions-item label="公司注册时间">{{
            descriptionData.company.companyRegisterDate
          }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  background-color: #fff;
}
</style>
